<template>
  <div class="order">
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="icon">
          <img src="../assets/logo.png" alt="" />
          <div class="title">茶饮鲜食</div>
        </div>
      </template>

      <template #right v-if="isLogin">
        <div @click="edit" style="font-weight: 600" v-if="isHas">
          {{ isEdit ? "完成" : "编辑" }}
        </div>
      </template>
    </van-nav-bar>

    <!-- 内容 -->
    <div class="main" v-if="isLogin">
      <!-- 照片墙 -->
      <div class="shopbag-bg">
        <img src="../assets/shopbag_bg.png" alt="" />
      </div>

      <!-- 购物袋商品列表 -->
      <div class="shopbag">
        <div
          class="shopbagbox"
          v-for="(item, index) in shopbagData"
          :key="item.sid"
        >
          <van-swipe-cell>
            <div class="shopbagitem">
              <!-- 复选框 -->
              <van-checkbox
                v-model="item.isCheck"
                checked-color="#37343b"
                @change="simpleCheck"
              ></van-checkbox>

              <!-- 商品图 -->
              <div class="photo">
                <img :src="item.small_img" alt="" />
              </div>

              <!-- 商品信息 -->
              <div class="mation">
                <!-- 商品名字 -->
                <div class="name">
                  {{ item.name }}
                  <!-- 商品规格 -->
                  <div class="specs">{{ item.rule }}</div>
                </div>

                <!-- 商品英文名 -->
                <div class="enname">{{ item.enname }}</div>

                <!-- 商品价格、数量 -->
                <div class="money">
                  <!-- 价格 -->
                  <div class="price">¥ {{ item.price }}</div>

                  <!-- 数量 -->
                  <van-stepper
                    v-model="item.count"
                    theme="round"
                    button-size="22"
                    disable-input
                    @change="changeCount(item.sid, item.count)"
                  />
                </div>
              </div>
            </div>

            <!-- 删除 -->
            <template #right>
              <van-button
                square
                type="danger"
                text="删除"
                @click="remove(item, index)"
              />
            </template>
          </van-swipe-cell>
        </div>
      </div>

      <div v-if="isHas">
        <!-- 编辑订单栏 -->
        <div class="remove" v-show="isEdit">
          <van-submit-bar
            button-text="删除选择"
            button-color="#999"
            @submit="allremove"
          >
            <van-checkbox
              v-model="Allchecked"
              checked-color="#37343b"
              @click="allSelect"
              >全选</van-checkbox
            >
          </van-submit-bar>
        </div>

        <!-- 提交订单栏 -->
        <div v-show="!isEdit">
          <van-submit-bar
            :price="total"
            button-text="提交订单"
            @submit="goSettle"
          >
            <van-checkbox
              v-model="Allchecked"
              checked-color="#37343b"
              @click="allSelect"
              >全选</van-checkbox
            >
          </van-submit-bar>
        </div>
      </div>
    </div>

    <!-- 未登录界面 -->
    <div class="login" v-if="!isLogin">
      <van-empty>
        <div class="img">
          <img src="../assets/star.svg" />
        </div>
        <p class="van-empty__description">您还没有登录</p>
        <p class="van-empty__description">请登录后查看您的订单</p>
        <van-button
          round
          type="danger"
          class="bottom-button"
          @click="goPage('Login')"
          >登录查看</van-button
        >
      </van-empty>
    </div>

    <div class="empty">
      <van-empty v-if="isLogin && !isHas" description="购物袋空空如也！">
        <van-button
          round
          type="danger"
          class="bottom-button"
          @click="goPage('Order')"
          >去逛逛</van-button
        >
      </van-empty>
    </div>
  </div>
</template>

<script>
export default {
  name: "Arrorder",

  data() {
    return {
      //用户是否登录
      isLogin: false,

      //全选
      Allchecked: false,

      //是否显示编辑订单栏
      isEdit: false,

      // 商品数量
      value: 1,

      //购物袋数据
      shopbagData: [],
    };
  },

  created() {
    this.getShopbagData();
  },

  methods: {
    //编辑
    edit() {
      this.isEdit = !this.isEdit;
    },

    //跳转界面
    goPage(name) {
      this.$router.push({ name });
    },

    // 获取购物袋数据
    getShopbagData() {
      this.axios({
        method: "get",
        url: "/findAllShopcart",
      })
        .then((res) => {
          //登录成功，隐藏未登录空状态
          if (res.data.code !== 700) {
            this.isLogin = true;
          }

          if (res.data.code === 5000) {
            //添加单选属性
            res.data.result.forEach((v) => {
              v.isCheck = false;
            });

            this.shopbagData = res.data.result;
          }
          this.shopbagData = res.data.result;
          // 
        })
        .catch((err) => {
          
        });
    },

    //全选功能
    allSelect() {
      
      this.shopbagData.forEach((v) => {
        v.isCheck = this.Allchecked;
      });
    },

    //单选功能
    simpleCheck() {
      //寻找没有勾选的单选
      for (let i = 0; i < this.shopbagData.length; i++) {
        if (!this.shopbagData[i].isCheck) {
          this.Allchecked = false;
          return;
        }
      }

      this.Allchecked = true;
    },

    //单个删除商品
    remove(item, index) {
      this.axios({
        method: "post",
        url: "/deleteShopcart",
        data: {
          sids: JSON.stringify([item.sid]),
        },
      })
        .then((res) => {
          // 

          // 用户未登录，跳转登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }

          if (res.data.code === 7000) {
            this.$toast("删除商品成功");
            this.shopbagData.splice(index, 1);

            //判断是否勾选全选
            this.simpleCheck();
          } else {
            this.$toast("删除商品失败");
          }
        })
        .catch((err) => {
          
        });
    },

    //删除多个商品
    allremove() {
      if (this.selectProduct.length === 0) {
        return this.$toast("请选择商品");
      }

      this.axios({
        method: "post",
        url: "/deleteShopcart",
        data: {
          sids: JSON.stringify(this.selectProduct),
        },
      })
        .then((res) => {
          // 

          // 用户未登录，跳转登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }

          if (res.data.code === 7000) {
            this.$toast("删除商品成功");

            //如果sid在this.selectProduct中，则删除该商品
            for (let i = 0; this.shopbagData.length; i++) {
              if (this.selectProduct.indexOf(this.shopbagData[i].sid) > -1) {
                this.shopbagData.splice(i, 1);
                i--;
              }
            }
          } else {
            this.$toast("删除商品失败");
          }
        })
        .catch((err) => {
          
        });
    },

    //修改数量
    changeCount(sid, e) {
      this.axios({
        method: "post",
        url: "/modifyShopcartCount",
        data: {
          sid,
          count: e,
        },
      })
        .then((res) => {
          // 

          // 用户未登录，跳转登录页面
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
          }
        })
        .catch((err) => {
          
        });
    },

    //跳转到订单结算页面
    goSettle() {
      if (this.selectProduct.length === 0) {
        return this.$toast("请选择商品");
      }

      let sids = this.selectProduct.join("-");
      this.$router.push({
        name: "Settle",
        query: { sids },
      });
    },
  },

  computed: {
    //是否存在购物数据
    isHas() {
      return this.shopbagData.length > 0;
    },

    //获取勾选的商品
    selectProduct() {
      let sids = [];
      this.shopbagData.forEach((v) => {
        if (v.isCheck) {
          sids.push(v.sid);
        }
      });
      return sids;
    },

    //统计订单总价
    total() {
      let total = 0;
      this.shopbagData.forEach((v) => {
        if (v.isCheck) {
          total += v.price * v.count;
        }
      });
      return total * 100;
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar {
  height: 40px;
}

.icon {
  width: 120px;
  height: 30px;
  display: flex;
}

.icon img {
  width: 30px;
  height: 30px;
}

.title {
  line-height: 30px;
  color: #37343b;
  font-weight: 600;
  font-size: 16px;
  margin-left: 10px;
  letter-spacing: 4px;
}

/deep/.van-nav-bar__text {
  color: #37343b;
  font-weight: 600;
}

// 内容
.main {
  position: fixed;
  top: 40px;
  bottom: 176px;
  left: 0;
  right: 0;
  background-color: rgb(236, 236, 236);
}

.shopbag-bg {
  width: 100%;
  height: 66px;
  margin-bottom: 10px;
}

.shopbag-bg img {
  width: 100%;
  height: 66px;
}

// 购物袋商品列表
.shopbag {
  height: 100%;
  overflow-y: auto;
}

.shopbagbox {
  width: 100%;
  margin-bottom: 10px;
  /deep/.van-button {
    height: 100%;
  }
}

.shopbagitem {
  width: 100%;
  padding: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  /deep/.van-checkbox__icon {
    margin-right: 30px;
  }
}

.photo {
  width: 80px;
  height: 80px;
}

.photo img {
  width: 80px;
  height: 80px;
}

.mation {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: 16px;
}

.name {
  width: 100%;
  height: 20px;
  line-height: 20px;
  display: flex;
  font-size: 14px;
  color: #37343b;
  font-weight: 600;
}

.specs {
  width: 100px;
  font-size: 12px;
  color: #9c9799;
  padding: 0 0 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.enname {
  width: 100%;
  font-size: 12px;
  color: #9c9799;
  padding: 2px 0 16px 0;
}

.money {
  width: 100%;
  display: flex;
  align-items: center;
}

.price {
  font-size: 16px;
  font-weight: 600;
  color: #dcab77;
}

/deep/.van-stepper {
  margin-left: 90px;
}

/deep/.van-stepper--round .van-stepper__plus {
  background-color: #dba871;
}

/deep/.van-stepper--round .van-stepper__minus {
  color: #dba871;
  border: 0.02667rem solid #dba871;
}

// 提交订单栏
/deep/.van-submit-bar {
  bottom: 50px;
}

/deep/.van-submit-bar__button--danger {
  background: #dba224;
}

//编辑订单栏
.remove {
  /deep/.van-submit-bar__button--danger {
    margin-left: auto;
  }
}

//购物袋为空界面
/deep/.van-empty {
  position: relative;
  top: 90px;
}

/deep/.van-empty__bottom {
  position: relative;
  right: 34px;
}

.empty {
  /deep/.bottom-button {
    left:36px
  }
}

// 未登录界面
.login {
  /deep/.van-empty__image {
    display: none;
  }

  /deep/.van-empty__description {
    text-align: center;
    color: #37343b;
    position: relative;
    left: 40px;
  }
}

.img {
  width: 200px;
  height: 200px;
  position: relative;
  left: 60px;
}

.img img {
  width: 200px;
  height: 200px;
}

.bottom-button {
  width: 200px;
  height: 30px;
  background-color: #37343b;
  border: 0;
  position: relative;
  left: 66px;
  top: 10px;
  font-size: 12px;
}
</style>